<template>
    <div class="tr basic-ist">
        <!-- 基础数据-->
        <div class="tr-top">
            <div class="left">
                <div class="itm"></div>
            </div>
            <div class="right">
                <div class="itm">
                    <el-input v-model="tableObjData.name__like" style="width: 240px;" clearable
                        placeholder="请输入名称" />
                </div>
                <div class="itm"><el-button @click="getEv(true)">查询</el-button></div>
            </div>
        </div>
        <div class="table-content">
            <el-table @row-dblclick="rowDblclickEv" empty-text="暂无数据" border height="100%" :data="tableListData">
                <el-table-column align="center" type="index" label="#" width="50" />
                <el-table-column show-overflow-tooltip align="center" header-align="center" prop="name" label="名称"
                    width="250" />
                <el-table-column show-overflow-tooltip align="center" header-align="center" prop="rem" label="备注"
                    width="250" />
            </el-table>
        </div>
        <pagination v-show="tableObjData.total > 0" :total="tableObjData.total" v-model:page="tableObjData.page"
            v-model:limit="tableObjData.pageSize" @pagination="getEv(true)" />
    </div>
</template>

<script setup>

import { ref, reactive, onMounted, onActivated } from 'vue'
import { ChartDataListGet,  } from '@/api/chart/index.js'
import { loadingStore } from '@/stores/index.js'

const loading = loadingStore()

const props = defineProps(['basicList','componentName'])
const emit = defineEmits(['dbRowBasicList'])
let tableObjData = reactive({
    name__like: '',
    page: 1,
    total: 0,
    has_next: false,
    has_prev: false,
    pages: 0,
    pageSize: 20
})

let tableListData = ref([])




onMounted(() => {
    getEv()
})

onActivated(() => {

})


// 查询数据
const getEv = async (msg) => {
    loading.loading = true
    try {
        tableObjData.componentName = props.componentName
        let arr_data = await ChartDataListGet(tableObjData)
        if (arr_data.status != 200) {
            return
        }
        if (msg == true) {
            ElMessage.success('查询成功')
        }
        tableListData.value = arr_data.data.result.data
        tableObjData.total = arr_data.data.result.total
        tableObjData.has_next = arr_data.data.result.has_next
        tableObjData.has_prev = arr_data.data.result.has_prev
        tableObjData.pages = arr_data.data.result.pages
        tableObjData.pageSize = arr_data.data.result.pageSize

    } catch (error) {
        ElMessage.error('查询接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

// 双击行
const rowDblclickEv = (row) => {
    console.log("双击行")
    console.log(row)
    emit("dbRowBasicList", row)
}

</script>

<style lang='less' scoped>
@tr-top-height: 50px;

// .tr {
//     height: 900px;
// }
.basic-ist {
    height: 100%;
}

.tr-top {
    height: @tr-top-height;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .right {
        display: flex;
        align-items: center;
    }

    .itm {
        padding-right: 4px;
        box-sizing: border-box;
    }
}

.table-content {
    height: calc(100% - var(--tr-top-height) - var(--tr-page-height));
}

.dialog-content {
    display: flex;
    align-items: center;
    height: 40px;

    .left {
        width: 60px;
        text-align: right;
        padding-right: 5px;
        box-sizing: border-box;
    }
}

/* 自定义表格悬停颜色类 */
:deep(.el-table__cell:hover) {
    cursor: pointer
}
</style>